// DialogWindow.ts
export class DialogWindow {
    private dialog: HTMLElement;
    private isVisible: boolean = false;
    private dragOffset = { x: 0, y: 0 };
    private isDragging = false;
  
    constructor(options: {
      title: string;
      content: string;
      width?: number;
      height?: number;
      closeOnOutsideClick?: boolean;   // 默认是true
    }) {
      // 创建对话框元素
      this.dialog = document.createElement('div');
      this.dialog.className = 'win11-dialog';
      
      // 创建对话框内容
      this.createDialogContent(options);
      
      // 添加事件监听
      this.addEventListeners();
      
      // 添加到文档
      document.body.appendChild(this.dialog);

      // 在constructor最后添加点击外部关闭的监听
      if (options.closeOnOutsideClick !== false) {
        this.addOutsideClickListener();
      }
    }

    // 添加新方法：监听外部点击
  private addOutsideClickListener() {
    document.addEventListener('mousedown', (e: MouseEvent) => {
      if (this.isVisible) {
        // 检查点击是否在对话框外部
        if (!this.dialog.contains(e.target as Node) && 
            e.target !== this.dialog) {
          this.hide();
        }
      }
    });
  }
  
    private createDialogContent(options: {
      title: string;
      content: string;
      width?: number;
      height?: number;
    }) {
      // 设置大小
      if (options.width) this.dialog.style.width = `${options.width}px`;
      if (options.height) this.dialog.style.height = `${options.height}px`;
  
      // 创建标题栏
      const titlebar = document.createElement('div');
      titlebar.className = 'win11-dialog-titlebar';
  
      const title = document.createElement('h2');
      title.className = 'win11-dialog-title';
      title.textContent = options.title;
  
      const closeBtn = document.createElement('button');
      closeBtn.className = 'win11-dialog-close';
      closeBtn.innerHTML = '✕';
      closeBtn.onclick = () => this.hide();
  
      titlebar.appendChild(title);
      titlebar.appendChild(closeBtn);
  
      // 创建内容区
      const content = document.createElement('div');
      content.className = 'win11-dialog-content';
      content.innerHTML = options.content;
  
      // 添加到对话框
      this.dialog.appendChild(titlebar);
      this.dialog.appendChild(content);
    }
  
    private addEventListeners() {
        const titlebar = this.dialog.querySelector('.win11-dialog-titlebar');
        
        titlebar?.addEventListener('mousedown', (e: MouseEvent) => {
            if (e.target === titlebar) {
            this.isDragging = true;
            const rect = this.dialog.getBoundingClientRect();
            this.dragOffset.x = e.clientX - rect.left;
            this.dragOffset.y = e.clientY - rect.top;
            }
        });

        // 使用类方法替代内联函数
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    }
  
    // 显示对话框
    public show() {
      if (!this.isVisible) {
        this.isVisible = true;
        this.dialog.classList.add('visible');
        
        // 居中显示
        const rect = this.dialog.getBoundingClientRect();
        this.dialog.style.left = `${(window.innerWidth - rect.width) / 2}px`;
        this.dialog.style.top = `${(window.innerHeight - rect.height) / 2}px`;
      }
    }
  
    // 隐藏对话框
    public hide() {
      if (this.isVisible) {
        // this.isVisible = false;
        // this.dialog.classList.remove('visible');
        // 销毁对话框
        this.dialog.remove();
      }
    }
  
    // 更新内容
    public setContent(content: string) {
      const contentEl = this.dialog.querySelector('.win11-dialog-content');
      if (contentEl) {
        contentEl.innerHTML = content;
      }
    }
  
    // 更新标题
    public setTitle(title: string) {
      const titleEl = this.dialog.querySelector('.win11-dialog-title');
      if (titleEl) {
        titleEl.textContent = title;
      }
    }
  
    // 销毁对话框
    public destroy() {
        // 清理所有事件监听器
        document.removeEventListener('mousedown', this.addOutsideClickListener);
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
        this.dialog.remove();
    }
    private handleMouseMove = (e: MouseEvent) => {
        if (this.isDragging) {
          const x = e.clientX - this.dragOffset.x;
          const y = e.clientY - this.dragOffset.y;
          this.dialog.style.left = `${x}px`;
          this.dialog.style.top = `${y}px`;
        }
      };

    private handleMouseUp = () => {
        this.isDragging = false;
    };
  }